<template>
  <view style="margin: 20rpx">
    <!-- 收货地址 -->
    <view style="background-color: white; border-radius: 10rpx; padding: 30rpx">
      <view style="font-size: 30rpx">收货人：张三 电话：12345678901</view>
      <view style="color: gray; font-size: 25rpx"
        >收货地址：北京市朝阳区朝阳公园</view
      >
    </view>

    <!-- 订单信息 -->
    <view
      style="background-color: white; margin-top: 20rpx; border-radius: 10rpx"
    >
      <!-- 订单内容 -->
      <view style="height: 20rpx"></view>
      <view style="display: flex; margin: 20rpx">
        <view>
          <image
            src="https://wx1.sinaimg.cn/mw690/e8a22d7bgy1hovb7jydr5j20u018zgsd.jpg"
            style="width: 150rpx; height: 150rpx; border-radius: 20rpx"
          ></image>
        </view>
        <view style="margin: 0rpx 30rpx 0rpx 30rpx; font-size: 25rpx"
          >女士羽绒服2025新款冬季韩版时尚百搭中长款羽绒服女装外套
          <view style="margin-top: 40rpx; color: gray">500g</view>
        </view>
        <view style="color: red"
          >￥222.00
          <view style="margin-left: 50rpx; color: gray">x1</view>
        </view>
      </view>
      <!-- 总价 -->
      <view class="xkbox">
        <view>商品总价</view>
        <view>￥222.00</view>
      </view>
      <view class="xkbox">
        <view>运费</view>
        <view>￥0.00</view>
      </view>
      <view class="xkbox">
        <view>实付款</view>
        <view style="color: red">￥222.00</view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view
      style="
        background-color: white;
        border-radius: 10rpx;
        margin-top: 20rpx;
        padding: 20rpx;
      "
    >
      <view>订单信息</view>
      <view class="xkbox2">
        <view>订单编号</view>
        <view>5123555255535253255</view>
      </view>
      <view class="xkbox2">
        <view>支付方式</view>
        <view>微信支付</view>
      </view>
      <view class="xkbox2">
        <view>下单时间</view>
        <view>2024-5-23 09:31:22</view>
      </view>
      <view class="xkbox2">
        <view>支付时间</view>
        <view>2024-5-23 09:31:22</view>
      </view>
      <view class="xkbox2">
        <view>发货时间</view>
        <view>2024-5-23 09:31:22</view>
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="czn">
      <!-- 取消订单 -->
      <view class="btn1" style="color: gray; border: 1rpx solid gray"
        >取消订单</view
      >
      <view class="btn1" style="color: red; border: 1rpx solid red"
        >立即支付</view
      >

      <!-- //查看物流 -->
      <view class="btn1" style="color: gray; border: 1rpx solid gray"
        >查看物流</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less">
.btn1 {
  margin-left: 20rpx;
  width: 30%;
  height: 60rpx;
  margin-top: 20rpx;
  line-height: 60rpx;
  border-radius: 50rpx;
  text-align: center;
  font-size: 30rpx;
}
.czn {
  position: fixed;
  bottom: 0rpx;
  display: flex;
  justify-content: center;
  background-color: white;
  height: 100rpx;
  left: 0rpx;
  width: 100%;
}
.xkbox2 {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0rpx 10rpx 0rpx;
  font-size: 25rpx;
  color: gray;
}
.xkbox {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 20rpx 10rpx 20rpx;
  font-size: 25rpx;
  color: gray;
}
page {
  background-color: #f1f1f1;
}
</style>
